import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router'
import Numbers from '../Numbers'
import { Checkbox} from 'antd-mobile';

/*
fromPage：cart 购物车页面，order 订单页面
 */
export default class OrderProductItem extends Component {
  static contextTypes={
    router:PropTypes.object.isRequired,
    onClick:PropTypes.func,
    onClickLeft:PropTypes.func,
    onClickRight:PropTypes.func,
    onClick_gift:PropTypes.func,
    onClickLeft_gift:PropTypes.func,
    onClickRight_gift:PropTypes.func
  }
  static defaultProps = {
    fromPage:'cart',
    
  }
  static propTypes = {
    fromPage:PropTypes.string,
  }
  constructor(props){
    super(props)
  }
  onClick(e){
   if(this.props.onClick instanceof Function)
     this.props.onClick(e)
  }
  onClickLeft(e){
   if(this.props.onClickLeft instanceof Function){
     this.props.onClickLeft(e)
   }
  }
  onClickRight(e){
   if(this.props.onClickRight instanceof Function)
     this.props.onClickRight(e)
  }
  onClick_gift(id,type,e){
   if(this.props.onClick_gift instanceof Function)
     this.props.onClick_gift(id,type,e)
  }
  onClickLeft_gift(id,type,e){
   if(this.props.onClickLeft_gift instanceof Function){
     this.props.onClickLeft_gift(id,type,e)
   }
  }
  onClickRight_gift(id,type,e){
   if(this.props.onClickRight_gift instanceof Function)
     this.props.onClickRight_gift(id,type,e)
  }
  

  render(){
    let {item,fromPage} =this.props
    return(
        <section className='order-product-item' >
                <div className='item' >
                {
                  fromPage == 'cart' ?
                  <Checkbox className='item-left' checked={item.checked} onChange={this.props.onChangeBox.bind(this, item.cart_id)}/>
                  :null
                }
                  <div className='item-center' onClick={ this.onClickLeft.bind(this)}>
                      <img className='image' src={item.goods_image || item.goods_img}/>
                  </div>
                  <div className='item-right' onClick={ this.onClickRight.bind(this)}>
                        <div className='line-clamp-2 name'>{item.goods_name}</div>
                        
                        {
                            item.spec_str ? <div className="spec">
                                {item.spec_str}</div> : ""
                        }
                       
                        <div className="money-footer">
                            <span className="money red">${item.goods_price}</span>
                            <div className="step-right">
                            {
                              fromPage == 'cart' || fromPage == 'buyNow'? 
                              <Numbers minNum={0} value={+item.goods_num} onCallBack={(num)=>{
                                      this.props.changeGoodsNum(num)
                                     }} />
                                     :
                              <span className='num'>x {item.goods_num}</span>
                            }
                                
                            </div>
                        </div>
                  </div>
                </div>
                
                <div className='gift-list clearfix' >
                  {
                    item.gift_list &&item.gift_list.map((gitem,g)=>{
                      return(
                        <div className='gitem' key={g} >
                        <img className='limg' onClick={ this.onClickLeft_gift.bind(this,gitem.goods_id,gitem.goods_price>0?2:1)} src={gitem.goods_image} style={{width:'60px',height:'60px'}}/>
                        <div className='rinfo' onClick={ this.onClickRight_gift.bind(this,gitem.goods_id,gitem.goods_price>0?2:1)}>
                          <p className='line-clamp-2 name'>{gitem.goods_name}</p>
                          <p className='line-clamp-1 spec'>{gitem.spec_str}</p>
                          {
                            gitem.goods_price>0?<p className='red'>${gitem.goods_price}</p>:<p className='red'>free gift</p>
                          }
                          {
                            fromPage == 'cart' && gitem.goods_price>0?
                           <div className='num-btn-plane'> <Numbers minNum={0} value={+gitem.goods_num} onCallBack={(num)=>{
                                      this.props.changeGiftGoodsNum(gitem,num)
                                     }} /></div>
                                     :
                            (gitem.goods_price==0?null:<span className='num-btn-plane num'>x {gitem.goods_num}</span>)

                          }
                          
                        </div>
                      </div>
                        )
                      
                    })
                  }

                </div>
        </section>
      )
  }
} 



















